<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
        <style type="text/css">
            #container
            {
                width: 500px;
                float: left;
                color: Gray;
                font-family: Courier New;
                font-size: 14px;
                overflow: hidden;
                height: 85px;
                position: relative;
                top: 5px;
            }
            #divlines 
            {
                position: absolute;
                width: 100%;
            }
            #text1 
            {
                overflow-x: scroll;
                height: 99px;
                font-family: Courier New;
                font-size: 14px;
                background-image: url("pages/test/images/none.png") ;
            }
            .index{
                border-bottom: 1px solid;
                width: 100%;
                height: 16px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="divlines">
            </div>
        </div>
        <div style="position: absolute; left:300px;">
            <textarea id="text1" cols="50" wrap="off">first
second
third
fourth
fifth
sixth
seventh
eighth
ninth</textarea></div>
        <script type="text/javascript">
            var lines = document.getElementById("divlines");
            var txtArea = document.getElementById( "text1");
            window.onload = function() {
                refreshlines();
                txtArea.onscroll = function () {
                    lines.style.top = -(txtArea.scrollTop) + "px";
                    return true;
                }
                txtArea.onkeyup = function () {
                    refreshlines();
                    return true;
                }
            }

            function refreshlines() {
                var nLines = txtArea.value.split("\n").length;
                lines.innerHTML = ""
                for (i=1; i<=nLines; i++) {
                    lines.innerHTML = lines.innerHTML + "<div class='index'>" + i + "." + "</div>";
                }
                lines.style.top = -(txtArea.scrollTop) + "px";     
            }
        </script>
    </body>
</html>